import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    TextInput,
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import Layer from '../../../../utils/Layer';
import fetchWebApi from '../../../../public/WebApi/fetchBase';
import getStorageValue from '../../../../utils/getStorageValue';
import {
    Constant
} from '../../../../public/js/constant';
import {
    POST_UPLOADINFDOATA_ADD,
    POST_ALBUMINFDOATA_UPLOAD
} from '../../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class upload extends Component {
    constructor(props) {
        super(props)
        const {
            itemimages,
            content,
            type
        } = this.props.navigation.state.params
        this.state = {
            headerRightImage: require("../../../../assets/images/headerIcon/AddFriends.png"), // 头部右边添加好友
            frameImg: require('../../../../assets/images/iconResources/Frame11.png'),
            topTitle: "上传图片/视频", // 头部标题
            uploadDatasInfoData: itemimages, // 父级传过来的本地相册 添加的照片
            content: content,// 图片 base64格式内容
            type: type, // 图片类型
            inputText: "", // 图片描述
            url: "", // 返回的 七牛云 转换的图片
        };
    }

    componentDidMount = () => {
        // 初始化转换 
        this.uploadDatasbase()
    }

    // 图片上传 转换
    async uploadDatasbase() {
        const {
            content,
            type
        } = this.state
        const res = await fetchWebApi(POST_ALBUMINFDOATA_UPLOAD,
            {
                token: await getStorageValue(Constant.TOKEN),
                fileContent: content,
                type: type
            }, 'POST');
        if (res.url) {
            this.setState({
                url: res.url
            })
        } else {
            Layer.showMsg("转换失败");
            return
        }
    }
    // 上传 自我展示的信息
    async uploadDatasInfo() {
        const {
            url,
            inputText
        } = this.state
        const res = await fetchWebApi(POST_UPLOADINFDOATA_ADD,
            {
                token: await getStorageValue(Constant.TOKEN),
                url: url,
                title: inputText,
            }, 'POST');
        if (res.status === 200) {
            // 弹窗提示
            Layer.showMsg("上传成功");
            this.setState({
                myAlbumDatas: res.data
            })
        } else {
            // 弹窗提示
            Layer.showMsg("上传失败");
            return
        }
        this.props.navigation.goBack()// 返回上一级
        // // 返回上一级时 需更新数据 定义的一个方法 getUserSelfFn()
        this.props.navigation.state.params.getUserSelfFn();
    }
    // 照片的文本描述
    onChangeText(inputText) {
        this.setState({
            inputText: inputText
        })
    }

    render() {
        const {
            topTitle,
            frameImg,
            uploadDatasInfoData
        } = this.state
        return (
            <View style={{ flex: 1 }}>
                {/* 导航栏 */}
                <NavBar
                    navigation={this.props.navigation}
                    title={topTitle}
                    titleColor={"#333"}
                    leftText={"取消"}
                    right={"上传"}
                    pressRight={() => {
                        this.uploadDatasInfo() // 上传 新的数据
                    }}
                />
                <View style={styles.padlr}>
                    {/* 详情描述 */}
                    <View style={styles.informationBox}>
                        <Image
                            source={frameImg}
                            style={styles.iconStyle}
                        />
                        <TextInput style={styles.information}
                            onChangeText={inputText =>
                                this.onChangeText(inputText)}
                            multiline={true}
                            maxLength={30}
                            placeholder={"为你的照片加点描述吧……"} />
                    </View>
                    <View style={styles.row}>
                        <View style={styles.item} >
                            <Image style={styles.systemPrompt}
                                source={{ uri: uploadDatasInfoData }} />
                        </View>
                    </View>
                </View>
            </View >
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 32,
        backgroundColor: 'transparent'
    },
    padlr: {
        paddingLeft: 15,
        paddingRight: 15,
        flex: 1,
        backgroundColor: "rgb(245,245,245)"
    },
    informationBox: {
        paddingTop: 20,
        marginBottom: 20,
        flexDirection: "row",
        alignItems: "flex-start",
        borderBottomWidth: 1,
        borderBottomColor: "rgb(220,220,220)",
    },
    iconStyle: {
        width: 20,
        height: 20,
        marginTop: 15,
        marginRight: 10
    },
    information: {
        color: "#999",
        fontSize: 15,
        width: "100%"
    },
    row: {
        flexDirection: "row",
        flexWrap: "wrap",
        width: "100%",
        justifyContent: "space-between"

    },
    item: {
        flexDirection: "row",
        marginTop: 10,
    },
    systemPrompt: {
        width: 110,
        height: 110,
        borderRadius: 10
    },
    systemPromptAdd: {
        width: 50,
        height: 50,
    },
    addSystemPrompt: {
        justifyContent: "center",
        alignItems: "center",
        width: 110,
        height: 110,
        borderRadius: 3,
        marginBottom: 10,
        backgroundColor: "rgb(220,220,220)"
    }

})